<template>
  <div style="margin: 20px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品概括" name="apply" :key="'apply'">
        <apply  v-if="productSituation"></apply>
      </el-tab-pane>
      <el-tab-pane label="商品明细" name="dispose" :key="'dispose'">
        <dispose v-if="productDetail"></dispose>
      </el-tab-pane>
      <el-tab-pane label="商品榜单" name="finish" :key="'finish'">
        <finish v-if="productRanking"></finish>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import productSituation from '@/views/dataCentre/productDataDetail/productSituation/index';
  import productDetail from '@/views/dataCentre/productDataDetail/productDetail/index';
  import productRanking from '@/views/dataCentre/productDataDetail/productRanking/index';

  export default {
    components: {
      apply: productSituation,
      dispose: productDetail,
      finish: productRanking

    },
    data() {
      return {
        activeName: 'apply',
        productSituation: true,
        productDetail: false,
        productRanking:false

      };
    },
    methods: {
      handleClick(tab, event) {
        if (tab.name === 'apply') {
          this.productSituation = true
          this.productDetail = false
          this.productRanking = false
        } else if (tab.name === 'dispose') {
          this.productSituation = false
          this.productRanking = false
          this.productDetail = true
        }else if (tab.name === 'finish') {
          this.productSituation = false
          this.productRanking = true
          this.productDetail = false
        }
      },
    }
  };
</script>
